<template>
  <div class="bigHigh_box">
    <!-- <TopOne :obj="obj" :getYao="getYao" :datalist="datalist" /> -->
    <div class="myComponent">
      <div class="header">
        <!-- 搜索/设置 -->
        <div class="top">
          <div class="l1"><span class="iconfont icon-shaixuan"></span>高级筛选</div>
          <div class="r1">
            <div class="btn" @click="openModal"><span class="iconfont icon-sousuo"></span>快速搜索</div>
            <div class="btn"><span class="iconfont icon-shezhi"></span>设置字段</div>
          </div>
        </div>
        <!-- 循环 -->
        <div class="check">
          <div v-for="item in arr" :key="item.id">
            <div class="row" v-if="item.children">
              <div class="title">{{ item.title }}:</div>
              <div :class="items.cid == activeObj[items.active] ? 'list actived' : 'list'"
                v-for="items in item.children" :key="items.cid" @click="tab(items)">
                {{ items.name }}
              </div>
            </div>
            <div class="row" v-else-if="item.input">
              <div class="title">{{ item.title }}:</div>
              <input type="text" class="belong" placeholder="选择人员">
            </div>
            <div class="row" v-else>
              <div class="title">{{ item.title }}:</div>
              <div class="list list_border" v-for="select in selectVal" :key="select.cid">
                <span class="s1">{{ select.name }}</span>
                <span class="del" @click="delSelectValOne(select)">×</span>
              </div>
              <div class="btn" @click="save">保存为快速搜索</div>
              <div class="btn" @click="delSelectVal">清除全部搜索条件</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="customTodo_body">
      <!-- <TopTwo :todoButton="todoButton" /> -->
      <el-table :data="tableData" style="width: 100%" highlight-current-row="true"
        @selection-change="handleSelectionChange" ref="multipleTable">
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="type" label="请假类型"> </el-table-column>
        <el-table-column prop="iSwhy" label="请假原因"> </el-table-column>
        <el-table-column prop="startTime" label="开始时间" sortable>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" sortable>
        </el-table-column>
        <el-table-column prop="dayLong" label="请假天数" sortable>
        </el-table-column>
        <el-table-column prop="tiTime" label="提交时间" sortable>
        </el-table-column>
        <el-table-column prop="done" label="审批状态"> </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <RouterLink :to="`/home/please/dalite?id=${scope.row.id}&&type=请假申请`">🗐详情</RouterLink>
            <!-- <el-button @click="handleEdit(scope.row)" type="text"></el-button> -->
            <el-button type="text" @click="handleDelete(scope.row.id)">🗑︎删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <!-- 快速搜索弹窗 -->
  <Transition name="bounce">
    <div v-if="showModalVal" class="alert">
      <div class="head">
        <div class="lef">
          <div class="p1">快速搜索列表</div>
          <div class="p2">点击名称切换快速搜索</div>
        </div>
        <div class="rig" @click="closeModal">×</div>
      </div>
    </div>
  </Transition>
  <div class="bigHigh_box">
    <TopOne :obj="obj" :getYao="getYao" :datalist="getList" />
    <div class="customTodo_body">
      <TopTwo :todoButton="todoButton" />
      <Table style="width: 100%;" :columns="columns" :data="corpData" :operate="operate" :detailText="detailText" @change="onChange">
      </Table>
      <!-- <Communication></Communication> -->
    </div>
    <MockBox v-if="open" :open="open" :handleOk="handleOk" :data="corpData"/>
    <!-- <updateVue></updateVue> -->

  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { onMounted, ref } from "vue";
import { message } from 'ant-design-vue';
import TopOne from "../../components/topOne.vue";
//用来进行搜索框的
import TopTwo from "../../components/topTwo.vue";

import MockBox from '@/components/mockBox.vue'

// import updateVue from "./components/update.vue";

//封装的button


//table表格来进行封装
import Table from "@/components/Table.vue"
// import axios from "axios";

import { useCounterStore } from '@/store/ticket'

//排序约束
import type { TableColumnType } from 'ant-design-vue';

// import { ref, onMounted, computed, reactive } from "vue";
// import { useRouter } from 'vue-router'

import { useRouter } from 'vue-router'
import { lastDays } from "@/utils/method";

// import {useRouter} from 'vue-router'
// 传给第一个input框的数据
const obj = {
  // 第一个输入框
  inputOne: {
    done: true,
    tishi: "搜索关键词",
  },
  // 后面倒数第二个带小人的输入框
  inputTwo: {
    done: true,
    tishi: "提交人员",
  },
  // 日历输入框
  inputThere: {
    done: true,
    tishi: "提交时间",
  },
  // 3个下拉列表
  selectOne: {
    done: true,
    tishi: "审批状态",
    todoDone: [
      {
        value: "已通过",
        label: "已通过",
      },
      {
        value: "待审批",
        label: "待审批",
      },
    ],
  },
  selectTwo: {
    done: true,
    tishi: "请假类型",
    todoDone: [
      {
        value: "事假",
        label: "事假",
      },
      {
        value: "病假",
        label: "病假",
      },
    ],
  },
  selectThere: {
    done: false,
    tishi: "客户星级",
    todoDone: [
      {
        label: "⭐",
        value: "1",
      },
      {
        label: "⭐⭐",
        value: "2",
      },
      {
        label: "⭐⭐⭐",
        value: "3",
      },
    ],
  },
};
// 获取到input的数据
function getYao(value: any) {
  if (value.inputOne) {
    tableData.value = tableData.value.filter((item: any) => {
      if (item.iSwhy.indexOf(value.inputOne) != -1) {
        return item;
      }
    });
  }
  if (value.selectOne) {
    tableData.value = tableData.value.filter((item: any) => {
      if (item.done.indexOf(value.selectOne) != -1) {
        return item;
      }
    });
  }
  console.log(value, "头部请求获取到的");
}
// 传给一排按钮的数据+方法
const todoButton = [
  { id: 1, name: "➕︎添加", fn: addOne },
  { id: 2, name: "⬇导入" },
  { id: 3, name: "⬆导出" },
  // {id:4,name:'🗊新建任务'},
  // {id:5,name:'🗘转移客户'},
  // {id:6,name:'🕴移入公海'},
  // {id:7,name:'⛙合并客户'},
  // {id:8,name:'🖊︎批量编辑'},
];
// 给按钮绑定事件
function addOne() {
  console.log("添加");
}
// import axios from 'axios';
let tableData = ref();

// 获取数据
onMounted(() => {
  datalist();
});
let datalist = async () => {
  try {
    // 执行异步操作，获取外部数据
    const response = await fetch("http://localhost:3000/oneTodo");
    const data = await response.json();
    console.log(data, "-----data");

    // 对获取到的数据进行处理
    tableData.value = data.data;
  } catch (error) {
    console.error(error);
  }
};

// 表格按钮
// let rou=useRouter()
// function handleEdit(am: any) {
//     rou.push('/home/please/dalite')
//     console.log(am, "am");
// }
let handleDelete = async (index: number) => {
  try {
    const response = await axios.post("http://localhost:3000/del", {
      key: `${index}`,
    });
    console.log("POST 请求成功:", response.data);
    datalist();
  } catch (error) {
    console.error("POST 请求失败:", error);
  }
};

let multipleSelection = ref([]);
function handleSelectionChange(val: any) {
  multipleSelection.value = val;
}


// 快速搜索弹窗
const showModalVal = ref(false)
const closeModal = () => {
  showModalVal.value = false
}
const openModal = () => {
  showModalVal.value = !showModalVal.value
}



// 高亮
const activeObj = ref<any>(
  {
    classificationA: 100,
    typeA: 200,
    statusA: 300,
    starA: 400,
    nextA: 500,
    engA: 600,
    belongA: 700
  }
)
// 已选条件
const selectVal = ref<any>([])
let arr = ref([
  {
    "id": 0,
    "title": "客户分类",
    "active": "classificationA",
    "children": [
      {
        "cid": 100,
        "name": "全部",
        "active": "classificationA"
      },
      {
        "cid": 10,
        "name": "我的客户",
        "active": "classificationA"
      },
      {
        "cid": 11,
        "name": "下属客户",
        "active": "classificationA"
      },
      {
        "cid": 12,
        "name": "重点客户",
        "active": "classificationA"
      },
      {
        "cid": 13,
        "name": "我协作的",
        "active": "classificationA"
      },
      {
        "cid": 14,
        "name": "下属协作的",
        "active": "classificationA"
      },
      {
        "cid": 15,
        "name": "今日新增",
        "active": "classificationA"
      },
      {
        "cid": 16,
        "name": "公海客户",
        "active": "classificationA"
      },
      {
        "cid": 17,
        "name": "垃圾客户",
        "active": "classificationA"
      }
    ]
  },
  {
    "id": 1,
    "title": "客户类型",
    "active": "typeA",
    "children": [
      {
        "cid": 200,
        "name": "全部",
        "active": "typeA"
      },
      {
        "cid": 18,
        "name": "企业客户",
        "active": "typeA"
      },
      {
        "cid": 19,
        "name": "个人客户",
        "active": "typeA"
      }
    ]
  },
  {
    "id": 2,
    "title": "客户状态",
    "active": "statusA",
    "children": [
      {
        "cid": 300,
        "name": "全部",
        "active": "statusA"
      },
      {
        "cid": 20,
        "name": "正在跟进",
        "active": "statusA"
      },
      {
        "cid": 21,
        "name": "正在试用",
        "active": "statusA"
      },
      {
        "cid": 22,
        "name": "准备购买",
        "active": "statusA"
      },
      {
        "cid": 23,
        "name": "准备付款",
        "active": "statusA"
      },
      {
        "cid": 24,
        "name": "已经购买",
        "active": "statusA"
      },
      {
        "cid": 25,
        "name": "暂时搁置",
        "active": "statusA"
      }
    ]
  },
  {
    "id": 3,
    "title": "客户星级",
    "active": "starA",
    "children": [
      {
        "cid": 400,
        "name": "全部",
        "active": "starA"
      },
      {
        "cid": 27,
        "name": 1,
        "active": "starA"
      },
      {
        "cid": 28,
        "name": 2,
        "active": "starA"
      },
      {
        "cid": 29,
        "name": 3,
        "active": "starA"
      },
      {
        "cid": 30,
        "name": 4,
        "active": "starA"
      },
      {
        "cid": 31,
        "name": 5,
        "active": "starA"
      }
    ]
  },
  {
    " id": 4,
    "title": "下次跟进时间",
    "active": "nextA",
    "children": [
      {
        "cid": 500,
        "name": "全部",
        "active": "nextA"
      },
      {
        "cid": 33,
        "name": "今天",
        "active": "nextA"
      },
      {
        "cid": 34,
        "name": "明天",
        "active": "nextA"
      },
      {
        "cid": 35,
        "name": "本周",
        "active": "nextA"
      },
      {
        "cid": 36,
        "name": "下周",
        "active": "nextA"
      },
      {
        "cid": 37,
        "name": "本月",
        "active": "nextA"
      },
      {
        "cid": 38,
        "name": "下月",
        "active": "nextA"
      },
      {
        "cid": 39,
        "name": "无",
        "active": "nextA"
      },
      {
        "cid": 40,
        "name": "自定义时间段",
        "active": "nextA"
      }
    ]
  },
  {
    " id": 5,
    "title": "首字母筛选",
    "active": "engA",
    "children": [
      {
        "cid": 600,
        "name": "全部",
        "active": "engA"
      },
      {
        "cid": 41,
        "name": "A",
        "active": "engA"
      },
      {
        "cid": 42,
        "name": "B",
        "active": "engA"
      },
      {
        "cid": 43,
        "name": "C",
        "active": "engA"
      },
      {
        "cid": 44,
        "name": "D",
        "active": "engA"
      },
      {
        "cid": 45,
        "name": "E",
        "active": "engA"
      },
      {
        "cid": 46,
        "name": "F",
        "active": "engA"
      },
      {
        "cid": 47,
        "name": "G",
        "active": "engA"
      },
      {
        "cid": 48,
        "name": "H",
        "active": "engA"
      },
      {
        "cid": 49,
        "name": "I",
        "active": "engA"
      },
      {
        "cid": 50,
        "name": "J",
        "active": "engA"
      },
      {
        "cid": 51,
        "name": "K",
        "active": "engA"
      },
      {
        "cid": 52,
        "name": "L",
        "active": "engA"
      },
      {
        "cid": 53,
        "name": "M",
        "active": "engA"
      },
      {
        "cid": 54,
        "name": "N",
        "active": "engA"
      },
      {
        "cid": 55,
        "name": "O",
        "active": "engA"
      },
      {
        "cid": 56,
        "name": "P",
        "active": "engA"
      },
      {
        "cid": 57,
        "name": "Q",
        "active": "engA"
      },
      {
        "cid": 58,
        "name": "R",
        "active": "engA"
      },
      {
        "cid": 59,
        "name": "S",
        "active": "engA"
      },
      {
        "cid": 60,
        "name": "T",
        "active": "engA"
      },
      {
        "cid": 61,
        "name": "U",
        "active": "engA"
      },
      {
        "cid": 62,
        "name": "V",
        "active": "engA"
      },
      {
        "cid": 63,
        "name": "W",
        "active": "engA"
      },
      {
        "cid": 64,
        "name": "X",
        "active": "engA"
      },
      {
        "cid": 65,
        "name": "Y",
        "active": "engA"
      },
      {
        "cid": 66,
        "name": "Z",
        "active": "engA"
      }
    ]
  },
  {
    "id": 6,
    "title": "所属行业",
    "active": "belongA",
    "children": [
      {
        "cid": 700,
        "name": "全部",
        "active": "belongA"
      },
      {
        "cid": 68,
        "name": "行业名称1",
        "active": "belongA"
      },
      {
        "cid": 69,
        "name": "行业名称2",
        "active": "belongA"
      },
      {
        "cid": 70,
        "name": "行业名称3",
        "active": "belongA"
      },
      {
        "cid": 71,
        "name": "行业名称4",
        "active": "belongA"
      },
      {
        "cid": 72,
        "name": "行业名称5",
        "active": "belongA"
      }
    ]
  },
  {
    "id": 7,
    "title": "归属人员",
    "input": true
  },
  {
    "id": 8,
    "title": "已选条件"
  }
])

// 已选条件
const tab = (obj: any) => {
  let flag = selectVal.value.find((item: any) => item.name === obj.name)
  if (flag) {
    message.info('不能添加重复条件')
  } else {
    let index = selectVal.value.findIndex((item: any) => item.active == obj.active)
    if (index != -1 && obj.name != '全部') {
      selectVal.value.splice(index, 1, obj)
      activeObj.value[obj.active] = obj.cid
    } else {
      if (obj.name != "全部") {
        selectVal.value.push({ cid: obj.cid, name: obj.name, active: obj.active })
        activeObj.value[obj.active] = obj.cid
      }
    }
  }
}
//删除一条
const delSelectValOne = (obj: any) => {
  if (obj.active == "classificationA") {
    activeObj.value[obj.active] = 100
  }
  if (obj.active == "typeA") {
    activeObj.value[obj.active] = 200
  }
  if (obj.active == "statusA") {
    activeObj.value[obj.active] = 300
  }
  if (obj.active == "starA") {
    activeObj.value[obj.active] = 400
  }
  if (obj.active == "nextA") {
    activeObj.value[obj.active] = 500
  }
  if (obj.active == "engA") {
    activeObj.value[obj.active] = 600
  }
  if (obj.active == "belongA") {
    activeObj.value[obj.active] = 700
  }
  selectVal.value = selectVal.value.filter((item: any) => item.cid != obj.cid)
}
// 清除搜索条件
const delSelectVal = () => {
  selectVal.value.length = 0
  activeObj.value = {
    classificationA: 100,
    typeA: 200,
    statusA: 300,
    starA: 400,
    nextA: 500,
    engA: 600,
    belongA: 700
  }
}
const save = () => {

}






</script>

<style lang="scss" scoped>
.myComponent {
  .header {
    height: 493px;
    background-color: white;
    margin-bottom: 10px;

    .top {
      height: 60px;
      border-bottom: 1px solid #e9e9e9;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;

      .l1 {
        font-weight: 700;
        font-size: 14px;
        color: #666666;

        span {
          margin-right: 5px;
        }
      }

      .r1 {
        display: flex;
        color: #999999;
        font-size: 14px;

        .btn {
          width: 120px;
          height: 35px;
          margin-right: 10px;
          text-align: center;
          line-height: 35px;
          border: 1px solid #e9e9e9;

          &:hover {
            cursor: pointer;
            color: #0079fe;
            border: 1px solid #0079fe;
          }
        }
      }
    }

    // 客户分类
    .check {
      height: calc(493px - 60px);
      padding: 10px 25px;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-evenly;

      .row {
        width: 100%;
        height: 28px;
        display: flex;
        align-items: center;
        font-size: 12px;

        .title {
          width: 91px;
          height: 28px;
          line-height: 28px;
          color: #999999;
        }

        .list {
          height: 25px;
          line-height: 25px;
          padding: 0 15px;
          color: #666666;

          &:hover {
            cursor: pointer;
          }

          .s1 {
            margin-right: 10px;
          }
        }

        .list_border {
          color: #0079fe;
          border: 1px solid #0079fe;
          margin-right: 10px;

          .del {
            font-weight: 700;
          }
        }

        .btn {
          height: 25px;
          line-height: 25px;
          padding: 0 15px;
          color: #0079fe;

          &:hover {
            cursor: pointer;
          }
        }

        .belong {
          width: 250px;
          height: 35px;
          border: 1px solid #e9e9e9;
          outline: none;
          padding-left: 10px;
        }

        .actived {
          background-color: #f3f9ff;
          color: #0079fe;
        }
      }
    }
  }
}

.bounce-enter-active {
  animation: bounce-in 0.5s;
}

.bounce-leave-active {
  animation: bounce-leave 0.5s;
}

@keyframes bounce-in {
  0% {
    height: 0px;
    top: calc(50% + 250px);
    opacity: 0;
  }

  100% {
    height: 500px;
    top: 50%;
    opacity: 1;
  }
}

@keyframes bounce-leave {
  0% {
    height: 500px;
    top: 50%;
    opacity: 1;
  }

  100% {
    height: 0px;
    top: calc(50% + 250px);
    opacity: 0;
  }
}

.alert {
  width: 600px;
  height: 500px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(172, 20, 106, 0.4);

  .head {
    height: 60px;
    background-color: #f2f2f2;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    .lef{
       .p1{
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 2px;
       }
       .p2{
        font-size: 13px;
       }
    }
    .rig{
      width: 50px;
      text-align: center;
      height: 100%;
      line-height:30px ;
      font-size: 25px;
      font-weight: 700;
    }

  }
}
</style>